<script setup lang="ts">
import { ref,onMounted,onUpdated } from 'vue'
import { Canvas } from './modules/canvas.js';

let isShow = ref(false);

let showView=()=>{
    

    let circleBtn = document.querySelector('.dynamic-module-imports .circle');
    let squareBtn = document.querySelector('.dynamic-module-imports .square');
    let triangleBtn = document.querySelector('.dynamic-module-imports .triangle');

    // create the canvas and reporting list
    let myCanvas = new Canvas('myCanvas', document.body, 480, 320);
    myCanvas.create();
    myCanvas.createReportList();

    // draw a square
    squareBtn.addEventListener('click', () => {
    import('./modules/square.js').then((Module) => {
        let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
        square1.draw();
        square1.reportArea();
        square1.reportPerimeter();
    })
    });

    // draw a circle
    circleBtn.addEventListener('click', () => {
    import('./modules/circle.js').then((Module) => {
        let circle1 = new Module.Circle(myCanvas.ctx, myCanvas.listId, 75, 200, 100, 'green');
        circle1.draw();
        circle1.reportArea();
        circle1.reportPerimeter();
    })
    });

    // draw a triangle
    triangleBtn.addEventListener('click', () => {
    import('./modules/triangle.js').then((Module) => {
        let triangle1 = new Module.Triangle(myCanvas.ctx, myCanvas.listId, 100, 75, 190, 'yellow');
        triangle1.draw();
        triangle1.reportArea();
        triangle1.reportPerimeter();
    })
    });
}

onMounted(()=>{
    if(isShow.value==true){
        showView();
    }
})

onUpdated(()=>{
    if(isShow.value==true){
        showView();
    }
})

</script>

<template>
    <div class="hide"><input type="button" :value="`${isShow ? 'hide' : 'show'} DynamicModuleImports`" @click="isShow = !isShow"></div>
    <div v-if="isShow" class="dynamic-module-imports">
        <div>Dynamic module class example</div>
        <button class="circle">Circle</button>
        <button class="square">Square</button>
        <button class="triangle">Triangle</button>
    </div>
</template>

<style scoped>
canvas {
        border: 1px solid black;
        margin-top: 10px;
      }
</style>